<template>
  <el-dialog width="60%" :title="title" :close-on-click-modal="false" :visible.sync="visible">

    <h2>订单信息</h2>
    <el-descriptions column="4">
        <el-descriptions-item label="订单编号">{{dataForm.orderNumber}}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{dataForm.createTime}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <dict-tag :options="dict.type.order_status" :value="dataForm.status" />
        </el-descriptions-item>
        <el-descriptions-item label="支付状态">
          <dict-tag :options="dict.type.order_pay_status" :value="dataForm.payStatus" />
        </el-descriptions-item>
        <el-descriptions-item label="支付类型">
          <dict-tag :options="dict.type.order_pay_type" :value="dataForm.settlement" />
        </el-descriptions-item>
        <el-descriptions-item label="加盟商">{{dataForm.agentName}}</el-descriptions-item>
        <el-descriptions-item label="应付金额">{{dataForm.meetAmount}}</el-descriptions-item>
        <el-descriptions-item label="实付金额">{{dataForm.paidAmount}}</el-descriptions-item>

        <!-- <el-descriptions-item label="取货方式">{{dataForm.pickingType == 1?'快递':'自取'}}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="取货码">{{dataForm.pickingCode}}</el-descriptions-item> -->

        <el-descriptions-item label="收货人">{{dataForm.clientAddress.receiptName}}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{dataForm.clientAddress.addressName}}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{dataForm.clientAddress.addressDetail}}</el-descriptions-item>
        <!-- <el-descriptions-item></el-descriptions-item> -->
        <el-descriptions-item label="备注">{{dataForm.remark}}</el-descriptions-item>
    </el-descriptions>
    <h2>商品列表</h2>
    <el-table :data="dataForm.orderDetailEntityList" style="width: 100%;">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="goodsNormName" label="商品名称" align="center"  />
      <el-table-column prop="picturePath" label="商品缩略图" width="200">
        <template slot-scope="scope">
          <img v-lazy="imageApi + scope.row.picturePath" style="height:40px"/>
        </template>
      </el-table-column>
      <el-table-column prop="price" width="200" label="价格" align="center" />
      <!-- <el-table-column prop="goodsType" label="商品类型" align="center" >
        <template slot-scope="scope">
          <div>
            <span v-for="(i,index) in scope.row.goodsTypeName"
              :key="i">{{index==scope.row.goodsTypeName.length-1?i:i+','}}</span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="unit" width="200" label="购买数量" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.quantity+scope.row.unit}}</div>
        </template>
      </el-table-column>

    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="visible = false">确定</el-button>
      <!-- <el-button type="primary" @click="dataFormSubmit()">确定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
  import {
    addOrUpdate
  } from "@/api/business/orderinfo";
  export default {
    dicts: ['order_status','order_pay_status','order_pay_type'],
    data() {
      return {
        title: '订单信息',
        visible: false,
        imageApi: process.env.VUE_APP_IMAGE_BASE_URL,
        couponArr: [{
          code: 0,
          name: '否'
        }, {
          code: 1,
          name: '是'
        }],
        dataForm: {
          id: 0,
          orderNumber: '',
          clientId: '',
          status: '',
          createTime: '',
          delFlag: '',
          delTime: '',
          sAddress: '',
          sLongitude: '',
          sLatitude: '',
          eAddress: '',
          eLongitude: '',
          eLatitude: '',
          distance: '',
          timeConsuming: '',
          waitingTime: '',
          waitingDuration: '',
          boardingTime: '',
          alightingTime: '',
          couponFlag: '',
          couponId: '',
          couponAmount: '',
          meetAmount: '',
          paidAmount: '',
          payTime: '',
          remark: '',
          points: ''
        },
        dataRule: {
          orderNumber: [{
            required: true,
            message: '订单编号不能为空',
            trigger: 'blur'
          }],
          clientId: [{
            required: true,
            message: '用户ID不能为空',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '状态 10:已下单 20：已接单，30：已到达 40：进行中 50：已下车；60：已结束不能为空',
            trigger: 'blur'
          }],
          createTime: [{
            required: true,
            message: '创建时间不能为空',
            trigger: 'blur'
          }],
          delFlag: [{
            required: true,
            message: '是否删除 1：是 0：否不能为空',
            trigger: 'blur'
          }],
          delTime: [{
            required: true,
            message: '删除时间不能为空',
            trigger: 'blur'
          }],
          sAddress: [{
            required: true,
            message: '上车位置不能为空',
            trigger: 'blur'
          }],
          sLongitude: [{
            required: true,
            message: '上车经度不能为空',
            trigger: 'blur'
          }],
          sLatitude: [{
            required: true,
            message: '上车维度不能为空',
            trigger: 'blur'
          }],
          eAddress: [{
            required: true,
            message: '下车位置不能为空',
            trigger: 'blur'
          }],
          eLongitude: [{
            required: true,
            message: '下车经度不能为空',
            trigger: 'blur'
          }],
          eLatitude: [{
            required: true,
            message: '下车维度不能为空',
            trigger: 'blur'
          }],
          distance: [{
            required: true,
            message: '公里数不能为空',
            trigger: 'blur'
          }],
          timeConsuming: [{
            required: true,
            message: '耗时（小时）不能为空',
            trigger: 'blur'
          }],
          waitingTime: [{
            required: true,
            message: '司机到达时间不能为空',
            trigger: 'blur'
          }],
          waitingDuration: [{
            required: true,
            message: '等待时长（分）不能为空',
            trigger: 'blur'
          }],
          boardingTime: [{
            required: true,
            message: '上车时间不能为空',
            trigger: 'blur'
          }],
          alightingTime: [{
            required: true,
            message: '下车时间不能为空',
            trigger: 'blur'
          }],
          couponFlag: [{
            required: true,
            message: '是否用代金券：0否，1是不能为空',
            trigger: 'blur'
          }],
          couponId: [{
            required: true,
            message: '代金券ID不能为空',
            trigger: 'blur'
          }],
          couponAmount: [{
            required: true,
            message: '代金券抵扣金额不能为空',
            trigger: 'blur'
          }],
          meetAmount: [{
            required: true,
            message: '应付金额不能为空',
            trigger: 'blur'
          }],
          paidAmount: [{
            required: true,
            message: '实际支付金额不能为空',
            trigger: 'blur'
          }],
          payTime: [{
            required: true,
            message: '支付时间不能为空',
            trigger: 'blur'
          }],
          remark: [{
            required: true,
            message: '备注不能为空',
            trigger: 'blur'
          }],
          points: [{
            required: true,
            message: '经纬度矩阵（JSON格式字符串)不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      init(record) {
        this.visible = true
        this.dataForm = record
      },

      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addOrUpdate(this.dataForm).then(res => {
              this.visible = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            })
          }
        })
      }
    }
  }
</script>
